
<template>
  <view-page class="device-view">
    <!-- <HeaderView /> -->
    <div class="bg"></div>
    <div class="container">
      <div class="top-view">
        <div class="header-title">
          双探头低真空场发射扫描电镜矿物扫描系统
        </div>
        <div class="desc">Apreo LoVac 30kv</div>
        <div class="img"><img src="../../assets/images/equ-demo.png" alt=""></div>
      </div>

      <div class="info">
        <div class="info-item">
          <div class="info-label">
            基本信息
          </div>
          <div class="info-desc">
            生产国家：<span class="value">美国</span>
          </div>
          <div class="info-desc">
            制造厂商：<span class="value">FEI</span>
          </div>
          <div class="info-desc">
            规格型号：<span class="value">Apreo,LoVac 30kv</span>
          </div>
          <div class="info-desc">
            主要功能：<span class="value">岩石高分辨率电镜成像，及微区矿物元素分析</span>
          </div>
        </div>
        <div class="info-item">
          <div class="info-label">
            基本信息
          </div>
          <div class="info-desc">
            稳定、干燥
          </div>
        </div>
        <div class="info-item">
          <div class="info-label">
            技术指标
          </div>
          <div class="info-desc">
            透射、反射、偏光、荧光
          </div>
        </div>
        
        <div class="info-item">
          <div class="info-label">
            执行标准
          </div>
          <div class="info-desc">
            SY/T 5162-2014 岩石样品扫描电子显微镜分析方法
          </div>
          <div class="info-desc">
            SY/T 6189-2018岩石矿物能谱定量分析方法
          </div>
        </div>

        <div class="info-item">
          <div class="info-label">
            实验目的
          </div>
          <div class="info-desc">
            生产国家：<span class="value">美国</span>
          </div>
        </div>
      </div>
      <!-- </div> -->
    </div>
    
    <template #footer>
      <div class="footer">
        <ButtonView size="lg" className="btn" @touchstart.stop="() => $router.push('/mobile/equ-time-booking')">立即预约</ButtonView>
      </div>
    </template>
  </view-page>
</template>

<script setup>
import ButtonView from '@/components/ButtonView.vue'
// import HeaderView from '@/components/Layout/HeaderView.vue';
</script>

<style scoped lang="scss">
.device-view{
  // display: flex;
  // flex-direction: column;
  // height: 100%;
  .container{
    // flex: 1;
    // overflow: hidden auto;
    // .bg{
    //   position: absolute;
    //   top: dpi(10rem);
    //   left: 0;
    //   width: 100%;
    //   height: dpi(35rem);
    //   background-color: #05204d;
    //   z-index: 0;
    // }

    .top-view{
      position: relative;
      padding-left: dpi(8rem);
      z-index: 1;
      .img{
        position: absolute;
        right: dpi(4rem);
        top: dpi(-2rem);
        min-width: dpi(19rem);
        height: dpi(36rem);
        > img{
          height: 100%;
        }
      }
    }

    .header-title{
      width: dpi(40rem);
      margin: dpi(10rem) 0 dpi(4rem) 0;
      font-family: PingFangSC-Semibold;
      font-size: dpi(4rem);
      color: #ffffff;
    }
    .desc{
      font-family: PingFangSC-Regular;
      font-size: dpi(2rem);
      color: #7fcfe2;
    }
  }

  .footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: dpi(10rem);
    background-color: #f5f5f5;
    box-shadow: 0rem 0rem dpi(5rem) 0rem rgba(0, 0, 0, 0.15);
  }
}
.info{
  margin-top: dpi(12rem);
  padding: 0 dpi(8rem);
  &-item{
    padding-top: dpi(4rem);
    &:not(&:last-child) {
      padding-bottom: dpi(4rem);
      border-bottom: 1px solid rgba(221, 221, 221, .5);
    }
  }
  &-label{
    margin-bottom: dpi(2rem);
    font-family: PingFangSC-Semibold;
    font-size: dpi(2rem);
    color: #05204d;
  }
  &-desc{
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    color: #565656;
    &:not(&:last-child) {
      margin-bottom: dpi(1rem);
    }
    .value{
      color: #0571b0;
    }
  }
}

.btn{
  padding: 0 dpi(5rem);
  height: 100% !important
}
</style>